import { useState } from 'react';
import { Box, Flex } from '@chakra-ui/react';
import { TabsLayout, PreviewTab, CodeTab } from '../../components/common/TabsLayout';

import CodeExample from '../../components/code/CodeExample';
import Dependencies from '../../components/code/Dependencies';
import PropTable from '../../components/common/Preview/PropTable';
import RefreshButton from '../../components/common/Preview/RefreshButton';
import useForceRerender from '../../hooks/useForceRerender';
import PreviewSlider from '../../components/common/Preview/PreviewSlider';
import PreviewSwitch from '../../components/common/Preview/PreviewSwitch';
import PreviewSelect from '../../components/common/Preview/PreviewSelect';
import Customize from '../../components/common/Preview/Customize';

import DecryptedText from '../../content/TextAnimations/DecryptedText/DecryptedText';
import { decryptedText } from '../../constants/code/TextAnimations/decryptedTextCode';

const DecryptedTextDemo = () => {
  const [speed, setSpeed] = useState(60);
  const [maxIterations, setMaxIterations] = useState(10);
  const [sequential, setSequential] = useState(true);
  const [useOriginalCharsOnly, setUseOriginalCharsOnly] = useState(false);
  const [revealDirection, setRevealDirection] = useState('start');
  const [animateOn, setAnimateOn] = useState('view');

  const [key, forceRerender] = useForceRerender();

  const propData = [
    {
      name: 'text',
      type: 'string',
      default: '""',
      description: 'The text content to decrypt.'
    },
    {
      name: 'speed',
      type: 'number',
      default: '50',
      description: 'Time in ms between each iteration.'
    },
    {
      name: 'maxIterations',
      type: 'number',
      default: '10',
      description: 'Max # of random iterations (non-sequential mode).'
    },
    {
      name: 'sequential',
      type: 'boolean',
      default: 'false',
      description: 'Whether to reveal one character at a time in sequence.'
    },
    {
      name: 'revealDirection',
      type: `"start" | "end" | "center"`,
      default: `"start"`,
      description: 'From which position characters begin to reveal in sequential mode.'
    },
    {
      name: 'useOriginalCharsOnly',
      type: 'boolean',
      default: 'false',
      description: 'Restrict scrambling to only the characters already in the text.'
    },
    {
      name: 'className',
      type: 'string',
      default: '""',
      description: 'CSS class for revealed characters.'
    },
    {
      name: 'parentClassName',
      type: 'string',
      default: '""',
      description: 'CSS class for the main characters container.'
    },
    {
      name: 'encryptedClassName',
      type: 'string',
      default: '""',
      description: 'CSS class for encrypted characters.'
    },
    {
      name: 'animateOn',
      type: `"view" | "hover"`,
      default: `"hover"`,
      description: 'Trigger scrambling on hover or scroll-into-view.'
    }
  ];

  const animateOptions = [
    { label: 'View', value: 'view' },
    { label: 'Hover', value: 'hover' },
    { label: 'Both', value: 'both' }
  ];
  const directionOptions = [
    { label: 'Start', value: 'start' },
    { label: 'End', value: 'end' },
    { label: 'Center', value: 'center' }
  ];

  return (
    <TabsLayout>
      <PreviewTab>
        <Box position="relative" py={{ md: 6, sm: 4 }} className="demo-container" h={400} overflow="hidden">
          <RefreshButton onClick={forceRerender} />

          <Flex width="80%" px=".5em">
            <DecryptedText
              key={key}
              speed={speed}
              text="Hacking into the mainframe..."
              maxIterations={maxIterations}
              sequential={sequential}
              revealDirection={revealDirection}
              parentClassName="decrypted-text"
              useOriginalCharsOnly={useOriginalCharsOnly}
              animateOn={animateOn}
            />
          </Flex>
        </Box>

        <Customize>
          <PreviewSelect
            title="Animate On"
            options={animateOptions}
            value={animateOn}
            name="animateOn"
            width={100}
            onChange={val => {
              setAnimateOn(val);
              forceRerender();
            }}
          />

          <PreviewSelect
            title="Direction"
            options={directionOptions}
            value={revealDirection}
            name="direction"
            width={100}
            onChange={val => {
              setRevealDirection(val);
              forceRerender();
            }}
          />

          <PreviewSlider
            title="Speed"
            min={10}
            max={200}
            step={10}
            value={speed}
            valueUnit="ms"
            onChange={val => {
              setSpeed(val);
              forceRerender();
            }}
          />

          <PreviewSlider
            title="Iterations"
            min={1}
            max={50}
            step={1}
            value={maxIterations}
            onChange={val => {
              setMaxIterations(val);
              forceRerender();
            }}
          />

          <PreviewSwitch
            title="Sequential"
            isChecked={sequential}
            onChange={checked => {
              setSequential(checked);
              forceRerender();
            }}
          />

          <PreviewSwitch
            title="Original Chars"
            isChecked={useOriginalCharsOnly}
            onChange={checked => {
              setUseOriginalCharsOnly(checked);
              forceRerender();
            }}
          />
        </Customize>

        <PropTable data={propData} />
        <Dependencies dependencyList={['motion']} />
      </PreviewTab>

      <CodeTab>
        <CodeExample codeObject={decryptedText} />
      </CodeTab>
    </TabsLayout>
  );
};

export default DecryptedTextDemo;
